<template>
	<view class="display-flex display-flex-column"  :style="viewColor">
		<view class="display-flex-column display-flex-align-center mt-20">
			<image src="../static/bdk.png" style=" height: 60px;width: 180px;" ></image>
		</view>
		<view v-if="scenicList.length" style="position:sticky;top:0;z-index: 100;padding: 15rpx;margin-top: 10px;" :style="scrollTop>=80?'background: #fff;':''">
			<scroll-view  :scroll-left="scrollLeft" class="scroll-view_H" scroll-x="true"  :scroll-with-animation="true"  :show-scrollbar="false">
				<view @click="chengScenic(index)"  :class="current==index?'sc-button-active':'sc-button'" v-for="(item,index) in scenicList" :key="index">
					<text class="ft-w700">{{item.title}}</text>
				</view>
			</scroll-view>
			
		</view>
		<view v-if="scenicList.length"  class="productList mt-15">
			<view class='list acea-row row-between-wrapper on' >
				<view v-if="scenicList[current] && scenicList[current].productList.length" class='item on' hover-class='none'
					v-for="(item,index) in scenicList[current].productList" :key="index" @click="godDetail(item)">
					<view class='pictrue on'>
						<image :src='item.image'></image>
					</view>
					<view class='text on display-flex display-flex-column display-flex-justify-space-between' >
						<view class='name line2 ft-w700 text-14'>{{item.store_name}}</view>
						<view class='x-money on  display-flex display-flex-justify-space-between' >
							<view class="">
								<!-- <text class="text-12">￥</text> -->
								<!-- <text  class="text-18 ft-w700">{{removeUnnecessaryDecimals(item.price)}}</text> -->
								<priceFormat class="ml-auto mr-2" :price="item.price" weight intSize="40" floatSize="26" labelSize="26"></priceFormat>
								<text class="text-12">起/人</text>
							</view>
							<view class="yd-button">
								<text class="ft-w700">立即预订</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {getOneTravelTourListApi} from '@/api/store.js';
	import {getScenicPoints} from '@/api/api.js';
	import {mapGetters} from "vuex";	
	import { goShopDetail } from '@/libs/order.js'
	let app = getApp();
	export default {
	computed: mapGetters(['viewColor','uid']),
		components: {
		},
		data() {
			return {
				
				productList: [],
				scrollTop: 0,
				scenicList: [],
				current: 0,
				scrollLeft: 0,
				screenWidth: '',
				opIndex: 0,
				where: {
					cate_id: '',
					order: '',
					price_on: '',
					price_off: '',
					brand_id: '',
					mer_type_id: '',
					keyword:'',
					is_trader: '',
					filter_params: '',
					page:1,
					limit:20,
					tour_type: '',
					is_ficti: 4,
					time: '',
					guarantee: '',
				}
			};
		},
		onLoad(options){
			var i =  uni.getSystemInfoSync(),
			o = Math.min(i.screenHeight, i.screenWidth);
			this.screenWidth = o;
			
			this.opIndex = options.opIndex;
			
			this.getScenicList()
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			
		},
		/**
		   * 页面上拉触底事件的处理函数
		*/
		onReachBottom: function () {
		},
		onPageScroll(e){
			var that = this;
			this.scrollTop = e.scrollTop;
		},
		methods: {
			
			chengScenic(index){
				var that = this;
				this.current = parseInt(index);
				var  screenWidth = that.screenWidth;
				// var s =  screenWidth * index - screenWidth / 2;
			
				if((parseInt(index) + 1)*100  >  screenWidth){
					this.scrollLeft = (parseInt(index) + 1)*100- screenWidth / 2
				}  else {
					this.scrollLeft = 0;
				}
				console.log("this.scrollLeft",this.scrollLeft)
				this.get_product_list(this.current)
				
			},
			getScenicList(){
				this.scenicList = [];
				getScenicPoints().then(res => {
					console.log('res',res)
					 res.data.forEach((el) => {
						 el.productList = [];
						this.scenicList.push(el);
					})
					if(this.opIndex){
						this.chengScenic(this.opIndex)
					} else {
						this.chengScenic(0)
					}
				}).catch(err => {

				});
			},
			//查找产品
			get_product_list: function(index) {
				let that = this;
				if(this.scenicList[index].productList.length) return
				var scenic = this.scenicList[index];
				this.scenicList[index].productList = [];
				that.where.cate_id = scenic.cid;
				getOneTravelTourListApi(that.where).then(res => {
					
					console.log(111,res)
					let list = res.data.list;
					this.scenicList[index].productList = list;
					console.log("this.scenicList",this.scenicList)
				}).catch(err => {
					console.log('err', err)
				});
			},
			// 去详情页
			godDetail(item) {
				goShopDetail(item, this.uid).then(res => {
						if (this.isLogin) {
							initiateAssistApi(item.activity_id).then(res => {
								let id = res.data.product_assist_set_id;
								uni.hideLoading();
								uni.navigateTo({
									url: '/pages/activity/assist_detail/index?id=' + id
								});		
							}).catch((err) => {
								uni.showToast({
									title: err,
									icon: 'none'
								})
							});
						} else {
							toLogin();	
						}
					})
				
			},
			removeUnnecessaryDecimals(num) {
			    // 将输入转换为数字类型
			    const number = Number(num);
			    // 判断是否为整数
			    if (Number.isInteger(number)) {
			        return number.toString();
			    }
			    // 将数字转换为字符串
			    const numStr = number.toString();
			    // 检查小数部分是否为 0 或 00
			    if (/\.0{1,2}$/.test(numStr)) {
			        return Math.trunc(number).toString();
			    }
			    return numStr;
			}

				
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #daf9f0  !important;
		// background-image: linear-gradient(to bottom, #0c8eff, #007AFF);;
	}
	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
	.yd-button{
		display: inline-block;
		width: 75px;
		height: 25px;
		line-height: 25px;
		border-radius: 20px;
		margin: 0;
		text-align: center;
		color: #FFFFFF;
		font-size: 13px;
		background-color: #ea3131;
	}
	.sc-button{
		display: inline-block;
		width: 100px;
		height: 40px;
		line-height: 40px;
		border-radius: 10px;
		margin: 0;
		text-align: center;
		color: #FFFFFF;
		font-size: 15px;
		background-color: #38a93c;
		margin-right: 5px;
	}
	.sc-button-active{
		display: inline-block;
		width: 100px;
		height: 40px;
		line-height: 40px;
		border-radius: 10px;
		margin: 0;
		text-align: center;
		color: #FFFFFF;
		font-size: 15px;
		background-color: #ff3e5b;
		margin-right: 5px;
	}
	
	.productList .list {
		padding: 0 30rpx;
		margin-top: 192rpx;
	
	}
	
	.productList .list.on {
		border-radius: 14rpx;
		margin-top: 0 !important;
		// background-color: #fff;
		// margin: 20rpx 0;
		// background-color: #fff;
	}
	
	.productList .list .item {
		width: 335rpx;
		background-color: #fff;
		border-radius: 14rpx;
		// margin-bottom: 20rpx;
	}
	
	.productList .list .item.on {
		width: 100%;
		display: flex;
		// padding: 0 24rpx 50rpx 24rpx;
		margin: 0;
		border-radius: 14rpx;
		margin-bottom: 10px ;
		height: 180rpx;
	}
	
	.productList .list .item .pictrue {
		position: relative;
		width: 100%;
		height: 335rpx;
	}
	
	.productList .list .item .pictrue.on {
		width: 180rpx;
		height: 180rpx;
	}
	
	.productList .list .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx 0 0  20rpx;
	}
	
	.productList .list .item .pictrue image.on {
		border-radius: 6rpx;
	}
	
	.productList .list .item .text {
		padding: 18rpx 20rpx;
		font-size: 30rpx;
		color: #222;
	}
	
	.productList .list .item .text.on {
		width: 456rpx;
		padding: 10px 0 10px 20rpx;
	}
	
	.productList .list .item .text .money {
		font-size: 26rpx;
		font-weight: bold;
		margin-top: 8rpx;
	}
	
	.productList .list .item .text .money.on {
		margin-top: 50rpx;
	}
	
	.productList .list .item .text .money .num {
		font-size: 34rpx;
	}
	
	.productList .list .item .text .vip {
		font-size: 22rpx;
		color: #aaa;
		margin-top: 7rpx;
	}
	
	.productList .list .item .text .vip.on {
		margin-top: 12rpx;
	}
	
	.productList .list .item .text .vip .vip-money {
		font-size: 24rpx;
		color: #282828;
		font-weight: bold;
	}
	
	.productList .list .item .text .vip .vip-money image {
		width: 46rpx;
		height: 21rpx;
		margin-left: 4rpx;
	}
	.x-money{
		color: var(--view-priceColor);
	}
	
</style>
